<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-04-21 09:12:17
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-05-23 16:08:30
 * @FilePath: \cxl-h5\src\pages\personalCenter\wallet\refund\history\Index.vue
-->

<template>
    <section class="refund-list-container">
        <section class="main">
            <section class="box">
                <section class="list" v-if="data.list.length">
                    <section
                        class="li"
                        v-for="(item, index) in data.list"
                        :key="item.id"
                        @click="data.openRefundDetailed(index)"
                    >
                        <section class="info">
                            <p>{{ item.createTime }}</p>
                            <span><i>¥</i> {{ item.refundAmount }}</span>
                        </section>
                        <section :class="['status', item.refundStatus === 1 ? 'waiting' : 'finish']">
                            <p>{{ item.refundStatus === 1 ? '退款中' : '已退款' }}</p>
                            <span class="iconfont icon-arrow-right"></span>
                        </section>
                    </section>
                </section>
                <section v-if="data.empty">
                    <NoOrder
                        describe="暂未查询到任何退款记录"
                        button-text="返回"
                        @touch="data.onOpenDetection"
                    ></NoOrder>
                </section>
            </section>
        </section>
    </section>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import NoOrder from '@/components/NoOrder.vue'
import RefundList from '.'

const data = reactive(new RefundList())
</script>

<style scoped lang="scss">
.refund-list-container {
    height: 100vh;
    background-color: var(--cxl-color-f2f6f8);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;

    .main {
        box-sizing: border-box;
        padding: var(--cxl-size-16) 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        height: 100%;
        .box {
            box-sizing: border-box;
            padding: 0 var(--cxl-size-16);
        }
        .list {
            background-color: var(--cxl-color-white);
            border-radius: var(--cxl-size-6);
            box-sizing: border-box;
            padding: var(--cxl-size-16);

            .li {
                &:not(:last-child) {
                    border-bottom: 1px solid var(--cxl-color-f0f0f0);
                    padding-bottom: var(--cxl-size-16);
                    margin-bottom: var(--cxl-size-16);
                }
                display: flex;
                align-items: center;
                justify-content: space-between;

                .info {
                    p {
                        font-size: var(--cxl-size-13);
                        color: var(--cxl-color-999999);
                        margin-bottom: var(--cxl-size-6);
                    }
                    span {
                        font-size: var(--cxl-size-18);
                        color: var(--cxl-color-333333);
                        font-weight: 600;
                        i {
                            font-size: var(--cxl-size-14);
                            color: var(--cxl-color-333333);
                        }
                    }
                }
                .status {
                    display: flex;
                    align-items: center;
                    font-size: var(--cxl-size-14);
                    p {
                        margin-right: var(--cxl-size-6);
                    }
                    &.waiting {
                        p {
                            color: var(--cxl-color-f57221);
                        }
                    }
                    &.finish {
                        p {
                            color: var(--cxl-color-primary);
                        }
                    }
                }
            }
        }
    }

    .list-main {
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
        padding: calc(var(--cxl-size-10)) var(--cxl-size-16) 0 var(--cxl-size-16);
    }
}
</style>
